<template>
    <el-card>
        <div class="title">{{ title }}</div>
        <div class="count">{{ count }}</div>
        <div class="middle">
            <slot name="middle"></slot>
        </div>
        <div class="line"></div>
        <div class="bottom">
            <slot name="bottom"></slot>
        </div>
    </el-card>
</template>

<script setup lang="ts">
const props = defineProps<{
    title: string,
    count: number
}>()
</script>

<style lang="scss" scoped>
.title {
    font-size: 12px;
    color: #bbb;
}

.count {
    margin-top: 5px;
    font-size: 26px;
    letter-spacing: 1px;
}

.middle {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.line {
    height: 2px;
    background: #aaa;
    margin: 10px 0;
}

.bottom {
    font-size: 12px;
    color: #bbb;
}


</style>